vue3子组件之间相互传值问题怎么解决 |
您所在的位置：网站首页 › vue3 组件传值 › vue3子组件之间相互传值问题怎么解决 |
|
这篇文章主要介绍“vue3子组件之间相互传值问题怎么解决”，在日常操作中，相信很多人在vue3子组件之间相互传值问题怎么解决问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”vue3子组件之间相互传值问题怎么解决”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！ vue3子组件之间相互传值 1、引用第三方库mitt npm install mitt2、在项目src文件夹下创建utils文件夹，在utils创建mitt.js，mitt.js中的代码如下： import mitt from "mitt"; export default new mitt();3、示例：组件A传值给组件B //在组件A中引入 import mitt from "@/utils/mitt"; //调用传值 mitt.emit("mittClick", "数据数据数据");//在组件B中引入 import mitt from "@/utils/mitt"; //接收传值 mitt.on("mittClick", (val) => { console.log(val)//数据数据数据 })vue不同组件之间相互传值 使用一个空Vue实例来进行传值，通过$emit,$on即可。 let bus = new Vue(); Vue.component("custom-a", { template: 'Click', methods: { transValue: () => bus.$emit("transValue", "hello from a") } }); Vue.component("custom-b", { template: '', data: function() { return { msg: "" } }, mounted() { bus.$on("transValue", msg => this.msg = msg) } }); new Vue({ el: "#demo" }); 转载请注明：vue3子组件之间相互传值问题怎么解决 | 李雷博客 - PHP博客 |
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |